<template>
  <div>
    <div class="main max-width">
      <el-card class="max-width" v-for="(item,index) in $data.menus" :key="index">

        <template #header><span>{{ item.name }}</span></template>
        <a class="link" @click="urlClick(it)" v-for="(it,_index) in item.menus" :key="_index">
          <el-tag>{{ it.name }}</el-tag>
        </a>
      </el-card>
    </div>
    <div style="display: flex;">
      《@npm_package_description@》 构建于 @BUILD_AT@
    </div>
  </div>
</template>

<script type="text/ecmascript-6" setup>


//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs()


//定义事件
const $emit = defineEmits(["update:modelValue", "loaded"]);


//定义data
const $data = reactive({menus: []})

var favMenus = {
  id: "fav", name: "收藏", menus: [
    {name: "ascii", url: "/sys/ascii"},
    {name: "集合Js操作", url: "/sys/array-js"},
    {name: "时间转换", url: "/time"},
    {name: "提取Sql", url: "/dev/mybatis-log-sql"},
    {name: "AppBase64编码", url: "/app-base64"},
  ]
};

//定义 onMounted 方法
onMounted(() => {
  jv.await(200, 10, () => {
    if (!top.jv.main || !top.jv.main.menus || !top.jv.main.menus.length) {
      console.log("main.menus还未加载!")
    }

    var menus = top.jv.main.menus || [];

    var all = jv.$router.options.routes
        .filter(it => it.meta && it.meta.tab && it.path)
        .map(it => {
          return {name: it.meta.tab, url: it.path};
        });

    all.removeItem(it =>
        !it.url.endsWith("/list") && !it.url.endsWith("-list") &&
        (
            (it.name == "首页") ||
            (it.name == "tools") ||
            it.url.endsWith("/add") ||
            it.url.includes("/:")
        )
    );

    var leftMenus = [];

    menus.forEach(group => {
      group.menus.forEach(m => {
        leftMenus.push(m)
      });
    });

    leftMenus.forEach(m => {
      all.removeItem(it => (it.name == m.name) && (it.url == m.url));
    });

    function leftMenu_contains(item) {
      return leftMenus.filter(it => (it.name == item.name) || (it.url == item.url)).length > 0;
    }


    var list_menus = {
      id: "list",
      name: "列表",
      menus: all
          .filter(it => it.url.endsWith("/list") || it.url.endsWith("-list"))
          .filter(it => !leftMenu_contains(it))
          .sort((a, b) => a.name.localeCompare(b.name))
    };

    var list2_menus = {
      id: "list2",
      name: "在菜单中的列表",
      menus: all
          .filter(it => it.url.endsWith("/list") || it.url.endsWith("-list"))
          .filter(it => leftMenu_contains(it))
          .minus(list_menus.menus)
          .sort((a, b) => a.name.localeCompare(b.name))
    }

    var others_menus = {
      id: "other",
      name: "其它",
      menus: all.minus(list_menus.menus)
    };

    $data.menus = [favMenus, list_menus, others_menus, list2_menus];

    return false;
  })
});

const isCom = computed(() => top.location.json._com_)

const urlClick = function (item) {
  if (isCom.value) {
    if (item.url.includes("?")) {
      item.url += "&_com_"
    } else {
      item.url += "?_com_"
    }
  }

  jv.openTabPage(item);
}

</script>

<style scoped lang="scss">
.main {
  display: grid;
  grid-gap: 20px;
  margin: 20px;
}

@media (min-width: 800px) {
  .main {
    grid-template-columns: repeat(2, 1fr);
  }
}


.main .link {
  margin-right: 10px;
  margin-bottom: 10px;
  display: inline-block;
}
</style>
